<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/common/Head.jsp"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>商品页面</title>
<style>
		[v-cloak]{display:none}
		</style>
<link href="${resourceServer }/AmazeUI-2.4.2/assets/css/admin.css"
	rel="stylesheet" type="text/css" />
<link href="${resourceServer }/AmazeUI-2.4.2/assets/css/amazeui.css"
	rel="stylesheet" type="text/css" />
<link href="${resourceServer }/basic/css/demo.css" rel="stylesheet"
	type="text/css" />
<link type="text/css" href="${resourceServer }/css/optstyle.css"
	rel="stylesheet" />
<link type="text/css" href="${resourceServer }/css/style.css"
	rel="stylesheet" />

<script type="text/javascript"
	src="${resourceServer }/basic/js/jquery-1.7.min.js"></script>
<script type="text/javascript"
	src="${resourceServer }/basic/js/quick_links.js"></script>

<script type="text/javascript"
	src="${resourceServer }/basic/js/quick_links.js"></script>


<script type="text/javascript"
	src="${resourceServer }/AmazeUI-2.4.2/assets/js/amazeui.js"></script>
<script type="text/javascript"
	src="${resourceServer }/js/jquery.imagezoom.min.js"></script>
<script type="text/javascript"
	src="${resourceServer }/js/jquery.flexslider.js"></script>
<script type="text/javascript" src="${resourceServer }/js/list.js"></script>
<script type="text/javascript" src="${resourceServer }/js/vue.min.js"></script>
</head>

<body>
	<div id="app" class="listMain" v-cloak>

		<!------------------------------------------顶部导航条 ------------------------------------->
		<div class="am-container header">
			<ul class="message-l">
				<div class="topMessage">
					<div class="menu-hd">
						<a href="#" target="_top" class="h"> 小明</a> <a href="#"
							target="_top"></a>
					</div>
				</div>
			</ul>
			<ul class="message-r">
				<div class="topMessage home">
					<div class="menu-hd">
						<a href="#" target="_top" class="h">商城首页</a>
					</div>
				</div>
				<div class="topMessage my-shangcheng">
					<div class="menu-hd MyShangcheng">
						<a href="#" target="_top">个人中心</a>
					</div>
				</div>
				<div class="topMessage mini-cart">
					<div class="menu-hd">
						<a id="mc-menu-hd" href="${basepath }/pay/goShopCart.do?userId=1" target="_top"><span>购物车</span><strong
							id="J_MiniCartNum" class="h"></strong></a>
					</div>
				</div>
				<div class="topMessage favorite">
					<div class="menu-hd">
						<a href="#" target="_top"><span>收藏夹</span></a>
					</div>
			</ul>
		</div>

		<!----------------------------------------悬浮搜索框------------------------------------------------->

		<div class="nav white">
			<div class="logo">
				<img src="${resourceServer }/images/logo.png" />
			</div>
			<div class="logoBig">
				<li><img src="${resourceServer }/images/logobig.png" /></li>
			</div>
			<div class="search-bar pr">
				<a name="index_none_header_sysc" href="#"></a>
				<form>
					<input id="searchInput" name="index_none_header_sysc" type="text"
						placeholder="搜索" autocomplete="off"> <input
						id="ai-topsearch" class="submit am-btn" value="搜索" index="1"
						type="submit">
				</form>
			</div>
		</div>

		<div class="clear"></div>
		<b class="line"></b>
		<div class="listMain">

			<!------------------------------------------------分类-------------------------------------------->
			<div class="nav-table">
				<div class="long-title">
					<span class="all-goods">全部分类</span>
				</div>
				<div class="nav-cont">
					<ul>
						<li class="index"><a href="#">首页</a></li>
						<li class="qc"><a href="#">闪购</a></li>
						<li class="qc"><a href="#">限时抢</a></li>
						<li class="qc"><a href="#">团购</a></li>
						<li class="qc last"><a href="#">大包装</a></li>
					</ul>
					<!-- <div class="nav-extra">
						<i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
						<i class="am-icon-angle-right" style="padding-left: 10px;"></i>
					</div> -->
				</div>
			</div>
			<ol class="am-breadcrumb am-breadcrumb-slash">
				<li><a href="#">首页</a></li>
				<li><a href="#">分类</a></li>
				<li class="am-active">内容</li>
			</ol>
			<script type="text/javascript">
				$(function() {
				});
				$(window).load(function() {
					$('.flexslider').flexslider({
						animation : "slide",
						start : function(slider) {
							$('body').removeClass('loading');
						}
					});
				});
			</script>
			<div class="scoll">
				<section class="slider">
					<div class="flexslider">
						<ul class="slides">
							<template v-for="image in imagesList()">
								<li class="tb-selected">
									<div class="tb-pic tb-s40">
										<a href="#"><img
											:src="'${imgServer }/'+image"
											:mid="'${imgServer }/'+image"
											:big="'${imgServer }/'+image"></a>
									</div>
								</li>
							</template>
						</ul>
					</div>
				</section>
			</div>

			<!-------------------------------------------放大镜------------------------------------------------>

			<div class="item-inform">
				<div class="clearfixLeft" id="clearcontent">

					<div class="box">
						<script type="text/javascript">
							$(document)
									.ready(
											function() {
												$(".jqzoom").imagezoom();
												$("#thumblist li a")
														.click(
																function() {
																	$(this)
																			.parents(
																					"li")
																			.addClass(
																					"tb-selected")
																			.siblings()
																			.removeClass(
																					"tb-selected");
																	$(".jqzoom")
																			.attr(
																					'src',
																					$(
																							this)
																							.find(
																									"img")
																							.attr(
																									"mid"));
																	$(".jqzoom")
																			.attr(
																					'rel',
																					$(
																							this)
																							.find(
																									"img")
																							.attr(
																									"big"));
																});
											});
						</script>

						<div class="tb-booth tb-pic tb-s310">
							<a :href="'${imgServer }/'+imagesList()[0]"><img
								:src="'${imgServer }/'+imagesList()[0]" alt="细节展示放大镜特效"
								:rel="'${imgServer }/'+imagesList()[0]" class="jqzoom" /></a>
						</div>
						<ul class="tb-thumb" id="thumblist" >
							<template v-for="image in imagesList()">
								<li class="tb-selected">
									<div class="tb-pic tb-s40">
										<a href="#"><img
											:src="'${imgServer }/'+image"
											:mid="'${imgServer }/'+image"
											:big="'${imgServer }/'+image"></a>
									</div>
								</li>
							</template>
						</ul>
					</div>

					<div class="clear"></div>
				</div>

				<div class="clearfixRight">

					<!--------------------------------------------------规格属性-------------------------------->
					<!-----------------------------------------名称------------------------------------------>
					<div class="tb-detail-hd">
						<h1>{{product.name}}</h1>
					</div>
					<div class="tb-detail-list">
						<!-------------------------------------------价格--------------------------------------->
						<div class="tb-detail-price">
							<li class="price iteminfo_price">
								<dt>促销价</dt>
								<dd>
									<em>¥</em><b class="sys_item_price">{{sku.price}}</b>
								</dd>
							</li>
							<li class="price iteminfo_mktprice">
								<dt>原价</dt>
								<dd>
									<em>¥</em><b class="sys_item_mktprice">{{sku.originalPrice}}</b>
								</dd>
							</li>
							<div class="clear"></div>
						</div>

						<!---------------------------------------------地址------------------------------------------>
						<dl class="iteminfo_parameter freight">
							<dt>配送至</dt>
							<div class="iteminfo_freprice">
								<div class="am-form-content address">
										<select  style="height:30px;" @change="changesheng()" v-model="selectedsheng">
											<template v-for="sheng in area">
												<option :value="sheng.codeid">{{sheng.cityname}}</option>
											</template>
										</select>
										<select style="height:30px;"  @change="changeshi()" v-model="selectedshi">
											<template v-for="s in shi">
												<option :value="s.codeid">{{s.cityname}}</option>
											</template>
										</select>
										<select style="height:30px;">
											<template v-for="x in xian">
												<option :value="x.codeid">{{x.cityname}}</option>
											</template>
										</select>
									</div>
								<div class="pay-logis">
									快递<b class="sys_item_freprice">{{sku.freight}}</b>元
								</div>
							</div>
						</dl>
						<div class="clear"></div>

						<!--------------------------------------------------销量--------------------------------->
						<ul class="tm-ind-panel">
							<li class="tm-ind-item tm-ind-sellCount canClick">
								<div class="tm-indcon">
									<span class="tm-label">月销量</span><span class="tm-count">1015</span>
								</div>
							</li>
							<li class="tm-ind-item tm-ind-sumCount canClick">
								<div class="tm-indcon">
									<span class="tm-label">累计销量</span><span class="tm-count">6015</span>
								</div>
							</li>
							<li class="tm-ind-item tm-ind-reviewCount canClick tm-line3">
								<div class="tm-indcon">
									<span class="tm-label">累计评价</span><span class="tm-count">640</span>
								</div>
							</li>
						</ul>
						<div class="clear"></div>

						<!------------------------------------------------各种规格-------------------------------->
						<dl class="iteminfo_parameter sys_item_specpara">
							<dt class="theme-login">
								<div class="cart-title">
									可选规格<span class="am-icon-angle-right"></span>
								</div>
							</dt>
							<dd>
								<!----------------------------------------------操作页面---------------------------->

								<div class="theme-popover-mask"></div>

								<div class="theme-popover">
									<div class="theme-span"></div>
									<div class="theme-poptit">
										<a href="javascript:;" title="关闭" class="close">×</a>
									</div>
									<div class="theme-popbod dform">
										<form class="theme-signin" name="loginform" action=""
											method="post">

											<div class="theme-signin-left">

												<div class="theme-options">
														<div class="cart-title">颜色</div>
														<ul>
															<li class="sku-line" @click="selectcolor=color.id" :class="{selected:selectcolor==color.id}" v-for="color in product.colors">{{color.name}}<i></i></li>
														</ul>
													</div>
												<div class="theme-options">
														<div class="cart-title">内存</div>
														<ul>
															<li class="sku-line" @click="selectstorage=storage.id" :class="{selected:selectstorage==storage.id}"  v-for="storage in product.storages">{{storage.name}}<i></i></li>
															
														</ul>
													</div>
												<div class="theme-options">
													<div class="cart-title number">数量</div>
													<dd>
													
														<input id="min" class="am-btn am-btn-default" name="" type="button" value="-" />
														
														<input id="text_box" name=""  v-model.lazy="num" type="text" value="1" style="width: 30px;" /> 
														
														<input id="add" class="am-btn am-btn-default" name="" type="button" value="+" /> 
														<span id="Stock" class="tb-hidden">库存<span class="stock">{{sku.stock}}</span>件
														</span>
													</dd>

												</div>
												<div class="clear"></div>

												<div class="btn-op">
													<div class="btn am-btn am-btn-warning">确认</div>
													<div class="btn close am-btn am-btn-warning">取消</div>
												</div>
											</div>
											<%-- <div class="theme-signin-right">
												<div class="img-info">
													<img src="${resourceServer }/images/songzi.jpg" />
												</div>
												<div class="text-info">
													<span class="J_Price price-now">¥39.00</span> <span
														id="Stock" class="tb-hidden">库存<span class="stock"></span>件
													</span>
												</div>
											</div> --%>

										</form>
									</div>
								</div>

							</dd>
						</dl>
						<div class="clear"></div>
						<!------------------------------------------------活动	--------------------------------------->
						<div class="shopPromotion gold">
							<div class="hot">
								<dt class="tb-metatit">店铺优惠</dt>
								<div class="gold-list">
									<p>
										购物满2件打8折，满3件7折<span>点击领券<i class="am-icon-sort-down"></i></span>
									</p>
								</div>
							</div>
							<div class="clear"></div>
							<div class="coupon">
								<dt class="tb-metatit">优惠券</dt>
								<div class="gold-list">
									<ul>
										<li>125减5</li>
										<li>198减10</li>
										<li>298减20</li>
									</ul>
								</div>
							</div>
						</div>
					</div>

					<div class="pay">
						<div class="pay-opt">
							<a href="home.html"><span class="am-icon-home am-icon-fw">首页</span></a>
							<a><span class="am-icon-heart am-icon-fw">收藏</span></a>

						</div>
						<li>
							<div class="clearfix tb-btn tb-btn-buy theme-login">
								<a id="LikBuy" title="点此按钮到下一步确认购买信息" href="#">立即购买</a>
							</div>
						</li>
						<li>
							<div class="clearfix tb-btn tb-btn-basket theme-login">
								<%-- <a id="LikBasket" title="加入购物车" :href="'${basepath }/pay/addShopCart.do?storageId='+selectstorage+'&colorId='+selectcolor"><i></i>加入购物车</a> --%>
								<a id="LikBasket" title="加入购物车" @click="addcart()"><i></i>加入购物车</a>
							</div>
						</li>
					</div>

				</div>

				<div class="clear"></div>

			</div>

			<!---------------------------------------------------优惠套装----------------------------------->
			<%-- <div class="match">
				<div class="match-title">优惠套装</div>
				<div class="match-comment">
					<ul class="like_list">
						<li>
							<div class="s_picBox">
								<a class="s_pic" href="#"><img
									src="${resourceServer }/images/cp.jpg"></a>
							</div> <a class="txt" target="_blank" href="#">萨拉米 1+1小鸡腿</a>
							<div class="info-box">
								<span class="info-box-price">¥ 29.90</span> <span
									class="info-original-price">￥ 199.00</span>
							</div>
						</li>
						<li class="plus_icon"><i>+</i></li>
						<li>
							<div class="s_picBox">
								<a class="s_pic" href="#"><img
									src="${resourceServer }/images/cp2.jpg"></a>
							</div> <a class="txt" target="_blank" href="#">ZEK 原味海苔</a>
							<div class="info-box">
								<span class="info-box-price">¥ 8.90</span> <span
									class="info-original-price">￥ 299.00</span>
							</div>
						</li>
						<li class="plus_icon"><i>=</i></li>
						<li class="total_price">
							<p class="combo_price">
								<span class="c-title">套餐价:</span><span>￥35.00</span>
							</p>
							<p class="save_all">
								共省:<span>￥463.00</span>
							</p> <a href="#" class="buy_now">立即购买</a>
						</li>
						<li class="plus_icon"><i class="am-icon-angle-right"></i></li>
					</ul>
				</div>
			</div> --%>
			<div class="clear"></div>


			<!---------------------------------------- introduce----------------------------------------->

			<div class="introduce">
				<div class="browse">
					<div class="mc">
						<%-- <ul>
							<div class="mt">
								<h2>看了又看</h2>
							</div>

							<li class="first">
								<div class="p-img">
									<a href="#"> <img class=""
										src="${resourceServer }/images/browse1.jpg">
									</a>
								</div>
								<div class="p-name">
									<a href="#"> 【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味 </a>
								</div>
								<div class="p-price">
									<strong>￥35.90</strong>
								</div>
							</li>
							<li>
								<div class="p-img">
									<a href="#"> <img class=""
										src="${resourceServer }/images/browse1.jpg">
									</a>
								</div>
								<div class="p-name">
									<a href="#"> 【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味 </a>
								</div>
								<div class="p-price">
									<strong>￥35.90</strong>
								</div>
							</li>
							<li>
								<div class="p-img">
									<a href="#"> <img class=""
										src="${resourceServer }/images/browse1.jpg">
									</a>
								</div>
								<div class="p-name">
									<a href="#"> 【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味 </a>
								</div>
								<div class="p-price">
									<strong>￥35.90</strong>
								</div>
							</li>
							<li>
								<div class="p-img">
									<a href="#"> <img class=""
										src="${resourceServer }/images/browse1.jpg">
									</a>
								</div>
								<div class="p-name">
									<a href="#"> 【三只松鼠_开口松子】零食坚果特产炒货东北红松子原味 </a>
								</div>
								<div class="p-price">
									<strong>￥35.90</strong>
								</div>
							</li>
							<li>
								<div class="p-img">
									<a href="#"> <img class=""
										src="${resourceServer }/images/browse1.jpg">
									</a>
								</div>
								<div class="p-name">
									<a href="#"> 【三只松鼠_开口松子218g】零食坚果特产炒货东北红松子原味 </a>
								</div>
								<div class="p-price">
									<strong>￥35.90</strong>
								</div>
							</li>

						</ul> --%>
					</div>
				</div>
				<div class="introduceMain">
					<div class="am-tabs" data-am-tabs>
						<ul class="am-avg-sm-3 am-tabs-nav am-nav am-nav-tabs">
							<li class="am-active"><a href="#"> <span
									class="index-needs-dt-txt">宝贝详情</span></a></li>

							<li><a href="#"> <span class="index-needs-dt-txt">全部评价</span></a>

							</li>

							<li><a href="#"> <span class="index-needs-dt-txt">猜你喜欢</span></a>
							</li>
						</ul>

						<div class="am-tabs-bd">

							<div class="am-tab-panel am-fade am-in am-active">
								<div class="J_Brand">

									<div class="attr-list-hd tm-clear">
										<h4></h4>
									</div>
									<div class="clear"></div>
									<div class="clear"></div>
								</div>

								<div class="details">
									<!-- <div class="attr-list-hd after-market-hd">
										<h4>商品细节</h4>
									</div> -->
									<div class="twlistNews">
										<div class="details" v-html="product.description">
										
									</div>
									</div>
								</div>
								<div class="clear"></div>

							</div>

							<div class="am-tab-panel am-fade">

								<div class="actor-new">
									<div class="rate">
										<strong>100<span>%</span></strong><br> <span>好评度</span>
									</div>
									<dl>
										<dt>买家印象</dt>
										<dd class="p-bfc">
											<q class="comm-tags"><span>照相好</span><em>(2177)</em></q> <q
												class="comm-tags"><span>手感好</span><em>(1860)</em></q> <q
												class="comm-tags"><span>充电快</span><em>(1823)</em></q> <q
												class="comm-tags"><span>玩游戏不卡</span><em>(1689)</em></q> <q
												class="comm-tags"><span>视频清楚</span><em>(1488)</em></q> <q
												class="comm-tags"><span>便宜</span><em>(1392)</em></q>
										</dd>
									</dl>
								</div>
								<div class="clear"></div>
								<div class="tb-r-filter-bar">
									<ul class=" tb-taglist am-avg-sm-4">
										<li class="tb-taglist-li tb-taglist-li-current">
											<div class="comment-info">
												<span>全部评价</span> <span class="tb-tbcr-num">(32)</span>
											</div>
										</li>

										<li class="tb-taglist-li tb-taglist-li-1">
											<div class="comment-info">
												<span>好评</span> <span class="tb-tbcr-num">(3256)</span>
											</div>
										</li>

										<li class="tb-taglist-li tb-taglist-li-0">
											<div class="comment-info">
												<span>中评</span> <span class="tb-tbcr-num">(32)</span>
											</div>
										</li>

										<li class="tb-taglist-li tb-taglist-li--1">
											<div class="comment-info">
												<span>差评</span> <span class="tb-tbcr-num">(5)</span>
											</div>
										</li>
									</ul>
								</div>
								<div class="clear"></div>

								<ul class="am-comments-list am-comments-list-flip">
									<li class="am-comment">
										<!---------------------------------------- 评论容器----- -->
										 <a href=""> <img class="am-comment-avatar"
											src="${resourceServer }/images/hwbn40x40.jpg" /> <!-- 评论者头像 -->
									</a>

										<div class="am-comment-main">
											<!--------------------------------- 评论内容容器 -------------->
											<header class="am-comment-hd">
												<!--<h3 class="am-comment-title">评论标题</h3>-->
												<div class="am-comment-meta">
													<!-- 评论元数据 -->
													<a href="#link-to-user" class="am-comment-author">b***1
														(匿名)</a>
													<!-- 评论者 -->
													评论于
													<time datetime="">2018年7月02日 17:46</time>
												</div>
											</header>

											<div class="am-comment-bd">
												<div class="tb-rev-item " data-id="255776406962">
													<div class="J_TbcRate_ReviewContent tb-tbcr-content ">
														超级好用的手机  改变以往我对手机的使用感受
													</div>
													<div class="tb-r-act-bar">颜色分类：黄&nbsp;&nbsp;内存：128g</div>
												</div>

											</div>
											<!-- 评论内容 -->
										</div>
									</li>
									
									
									
									
									
				

								</ul>

								<div class="clear"></div>

								<!--分页 -->
								<ul class="am-pagination am-pagination-right">
									<li class="am-disabled"><a href="#">&laquo;</a></li>
									<li class="am-active"><a href="#">1</a></li>
									<li><a href="#">2</a></li>
									<li><a href="#">3</a></li>
									<li><a href="#">4</a></li>
									<li><a href="#">5</a></li>
									<li><a href="#">&raquo;</a></li>
								</ul>
								<div class="clear"></div>

								<!-- <div class="tb-reviewsft">
									<div class="tb-rate-alert type-attention">
										购买前请查看该商品的 <a href="#" target="_blank">购物保障</a>，明确您的售后保障权益。
									</div>
								</div> -->

							</div>

							<div class="am-tab-panel am-fade">
								<%-- <div class="like">
									<ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 boxes">
										<li>
											<div class="i-pic limit">
												<img src="${resourceServer }/images/imgsearch1.jpg" />
												<p>
													【良品铺子_开口松子】零食坚果特产炒货 <span>东北红松子奶油味</span>
												</p>
												<p class="price fl">
													<b>¥</b> <strong>298.00</strong>
												</p>
											</div>
										</li>
										<li>
											<div class="i-pic limit">
												<img src="${resourceServer }/images/imgsearch1.jpg" />
												<p>
													【良品铺子_开口松子】零食坚果特产炒货 <span>东北红松子奶油味</span>
												</p>
												<p class="price fl">
													<b>¥</b> <strong>298.00</strong>
												</p>
											</div>
										</li>
										<li>
											<div class="i-pic limit">
												<img src="${resourceServer }/images/imgsearch1.jpg" />
												<p>
													【良品铺子_开口松子】零食坚果特产炒货 <span>东北红松子奶油味</span>
												</p>
												<p class="price fl">
													<b>¥</b> <strong>298.00</strong>
												</p>
											</div>
										</li>
										<li>
											<div class="i-pic limit">
												<img src="${resourceServer }/images/imgsearch1.jpg" />
												<p>
													【良品铺子_开口松子】零食坚果特产炒货 <span>东北红松子奶油味</span>
												</p>
												<p class="price fl">
													<b>¥</b> <strong>298.00</strong>
												</p>
											</div>
										</li>
										<li>
											<div class="i-pic limit">
												<img src="${resourceServer }/images/imgsearch1.jpg" />
												<p>
													【良品铺子_开口松子】零食坚果特产炒货 <span>东北红松子奶油味</span>
												</p>
												<p class="price fl">
													<b>¥</b> <strong>298.00</strong>
												</p>
											</div>
										</li>
										<li>
											<div class="i-pic limit">
												<img src="${resourceServer }/images/imgsearch1.jpg" />
												<p>
													【良品铺子_开口松子】零食坚果特产炒货 <span>东北红松子奶油味</span>
												</p>
												<p class="price fl">
													<b>¥</b> <strong>298.00</strong>
												</p>
											</div>
										</li>
										<li>
											<div class="i-pic limit">
												<img src="${resourceServer }/images/imgsearch1.jpg" />
												<p>
													【良品铺子_开口松子】零食坚果特产炒货 <span>东北红松子奶油味</span>
												</p>
												<p class="price fl">
													<b>¥</b> <strong>298.00</strong>
												</p>
											</div>
										</li>
										<li>
											<div class="i-pic limit">
												<img src="${resourceServer }/images/imgsearch1.jpg" />
												<p>
													【良品铺子_开口松子】零食坚果特产炒货 <span>东北红松子奶油味</span>
												</p>
												<p class="price fl">
													<b>¥</b> <strong>298.00</strong>
												</p>
											</div>
										</li>
										<li>
											<div class="i-pic limit">
												<img src="${resourceServer }/images/imgsearch1.jpg" />
												<p>
													【良品铺子_开口松子】零食坚果特产炒货 <span>东北红松子奶油味</span>
												</p>
												<p class="price fl">
													<b>¥</b> <strong>298.00</strong>
												</p>
											</div>
										</li>
										<li>
											<div class="i-pic limit">
												<img src="${resourceServer }/images/imgsearch1.jpg" />
												<p>
													【良品铺子_开口松子】零食坚果特产炒货 <span>东北红松子奶油味</span>
												</p>
												<p class="price fl">
													<b>¥</b> <strong>298.00</strong>
												</p>
											</div>
										</li>
										<li>
											<div class="i-pic limit">
												<img src="${resourceServer }/images/imgsearch1.jpg" />
												<p>
													【良品铺子_开口松子】零食坚果特产炒货 <span>东北红松子奶油味</span>
												</p>
												<p class="price fl">
													<b>¥</b> <strong>298.00</strong>
												</p>
											</div>
										</li>
										<li>
											<div class="i-pic limit">
												<img src="${resourceServer }/images/imgsearch1.jpg" />
												<p>
													【良品铺子_开口松子】零食坚果特产炒货 <span>东北红松子奶油味</span>
												</p>
												<p class="price fl">
													<b>¥</b> <strong>298.00</strong>
												</p>
											</div>
										</li>
									</ul>
								</div> --%>
								<div class="clear"></div>

								<!--分页 -->
								<!-- <ul class="am-pagination am-pagination-right">
									<li class="am-disabled"><a href="#">&laquo;</a></li>
									<li class="am-active"><a href="#">1</a></li>
									<li><a href="#">2</a></li>
									<li><a href="#">3</a></li>
									<li><a href="#">4</a></li>
									<li><a href="#">5</a></li>
									<li><a href="#">&raquo;</a></li>
								</ul>  -->
								<div id="pagelist" class="pagelist"></div>
								
								<div class="clear"></div>

							</div>

						</div>

					</div>

					<div class="clear"></div>

					<div class="footer">
						<div class="footer-hd">
							<p>
								<a href="#">恒望科技</a> <b>|</b> <a href="#">商城首页</a> <b>|</b> <a
									href="#">支付宝</a> <b>|</b> <a href="#">物流</a>
							</p>
						</div>
						<div class="footer-bd">
							<p>
								<a href="#">关于恒望</a> <a href="#">合作伙伴</a> <a href="#">联系我们</a> <a
									href="#">网站地图</a> <em>© 2015-2025 Hengwang.com 版权所有. 更多模板
									<a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a>
									- Collect from <a href="http://www.cssmoban.com/" title="网页模板"
									target="_blank">网页模板</a>
								</em>
							</p>
						</div>
					</div>
				</div>

			</div>
		</div>
		<!--菜单 -->
		<div >
		
			<%-- <div id="sidebar">
				<div id="wrap">
					<div id="prof" class="item">
						<a href="#"> <span class="setting"></span>
						</a>
						<div class="ibar_login_box status_login">
							<div class="avatar_box">
								<p class="avatar_imgbox">
									<img src="${resourceServer }/images/no-img_mid_.jpg" />
								</p>
								<ul class="user_info">
									<li>用户名：sl1903</li>
									<li>级&nbsp;别：普通会员</li>
								</ul>
							</div>
							<div class="login_btnbox">
								<a href="#" class="login_order">我的订单</a> <a href="#"
									class="login_favorite">我的收藏</a>
							</div>
							<i class="icon_arrow_white"></i>
						</div>

					</div>
					<div id="shopCart" class="item">
						<a href="#"> <span class="message"></span>
						</a>
						<p>购物车</p>
						<p class="cart_num">0</p>
					</div>
					<div id="asset" class="item">
						<a href="#"> <span class="view"></span>
						</a>
						<div class="mp_tooltip">
							我的资产 <i class="icon_arrow_right_black"></i>
						</div>
					</div>

					<div id="foot" class="item">
						<a href="#"> <span class="zuji"></span>
						</a>
						<div class="mp_tooltip">
							我的足迹 <i class="icon_arrow_right_black"></i>
						</div>
					</div>

					<div id="brand" class="item">
						<a href="#"> <span class="wdsc"><img
								src="${resourceServer }/images/wdsc.png" /></span>
						</a>
						<div class="mp_tooltip">
							我的收藏 <i class="icon_arrow_right_black"></i>
						</div>
					</div>

					<div id="broadcast" class="item">
						<a href="#"> <span class="chongzhi"><img
								src="${resourceServer }/images/chongzhi.png" /></span>
						</a>
						<div class="mp_tooltip">
							我要充值 <i class="icon_arrow_right_black"></i>
						</div>
					</div>

					<div class="quick_toggle">
						<li class="qtitem"><a href="#"><span class="kfzx"></span></a>
							<div class="mp_tooltip">
								客服中心<i class="icon_arrow_right_black"></i>
							</div></li>
						<!--二维码 -->
						<li class="qtitem"><a href="#none"><span
								class="mpbtn_qrcode"></span></a>
							<div class="mp_qrcode" style="display: none;">
								<img src="${resourceServer }/images/weixin_code_145.png" /><i
									class="icon_arrow_white"></i>
							</div></li>
						<li class="qtitem"><a href="#top" class="return_top"><span
								class="top"></span></a></li>
					</div>

					<!--回到顶部 -->
					<div id="quick_links_pop" class="quick_links_pop hide"></div>

				</div>

			</div> --%>
			<div id="prof-content" class="nav-content">
				<div class="nav-con-close">
					<i class="am-icon-angle-right am-icon-fw"></i>
				</div>
				<div>我</div>
			</div>
			<div id="shopCart-content" class="nav-content">
				<div class="nav-con-close">
					<i class="am-icon-angle-right am-icon-fw"></i>
				</div>
				<div>购物车</div>
			</div>
			<div id="asset-content" class="nav-content">
				<div class="nav-con-close">
					<i class="am-icon-angle-right am-icon-fw"></i>
				</div>
				<div>资产</div>

				<div class="ia-head-list">
					<a href="#" target="_blank" class="pl">
						<div class="num">0</div>
						<div class="text">优惠券</div>
					</a> <a href="#" target="_blank" class="pl">
						<div class="num">0</div>
						<div class="text">红包</div>
					</a> <a href="#" target="_blank" class="pl money">
						<div class="num">￥0</div>
						<div class="text">余额</div>
					</a>
				</div>

			</div>
			<div id="foot-content" class="nav-content">
				<div class="nav-con-close">
					<i class="am-icon-angle-right am-icon-fw"></i>
				</div>
				<div>足迹</div>
			</div>
			<div id="brand-content" class="nav-content">
				<div class="nav-con-close">
					<i class="am-icon-angle-right am-icon-fw"></i>
				</div>
				<div>收藏</div>
			</div>
			<div id="broadcast-content" class="nav-content">
				<div class="nav-con-close">
					<i class="am-icon-angle-right am-icon-fw"></i>
				</div>
				<div>充值</div>
			</div>
		</div>

	</div>
	<script type="text/javascript">
	
	
		var area;
		var product;

		$.ajax({
			url : "${basepath}/area/list.do",
			type : "get",
			dataType : "json",
			async : false,
			success : function(data) {
				area = data;
			}
		});
		$.ajax({
			url : "${basepath}/product/getProductDetails.do",
			type : "get",
			dataType : "json",
			data : {
				id : "${id}"
			},
			async : false,
			success : function(data) {
				product = data;
			}
		});
		console.log(product);
		var vue = new Vue(
				{
					el : "#app",
					data : {
						area : area,
						shi : area[0].children,
						xian : area[0].children[0].children,
						selectedsheng : area[0].codeid,
						selectedshi : area[0].children[0].codeid,
						product : product,
						selectcolor : product.skus[0].colorId,
						selectstorage : product.skus[0].storageId,
						images:product.images,
						num:"1",
						seletesku:product.skus[0].id
					},
					computed : {
						sku : function() {
							for (var i = 0; i < this.product.skus.length; i++) {
								if (this.selectcolor == this.product.skus[i].colorId
										&& this.selectstorage == this.product.skus[i].storageId) {
									this.seletesku = this.product.skus[i].id;
									return this.product.skus[i];
								}
							}
						}
					},
					methods : {
						changesheng : function() {
							for (var i = 0; i < this.area.length; i++) {
								if (this.selectedsheng == this.area[i].codeid) {
									this.shi = this.area[i].children;
									this.selectedshi = this.area[i].children[0].codeid;
									this.xian = this.area[i].children[0].children;
									return;
								}
							}
						},
						changeshi : function() {
							for (var i = 0; i < this.shi.length; i++) {
								if (this.selectedshi == this.shi[i].codeid) {
									this.xian = this.shi[i].children;
									return;
								}
							}
						},
						imagesList: function(images){
							return this.images.split(";");
						},
						addcart:function(storageId,colorId,num){
							var num = this.num;
							var id = this.seletesku;
							
							$.ajax({
								url : "${basepath}/pay/addShopCart.do",
								type : "get",
								dataType : "text",
								data : {
									num:num,
									id:id
									
								},
								async : false,
								success : function(data) {
									console.log(data);
									
									alert("添加成功");
								}
							})//ajax
							
							
						}//addcart
						
						
						
					}//methods
				});
	</script>

</body>

</html>